<template>
  <div class="back" @click="back">
    <i class="fdx-icons-back icon" :class="[color]"></i>
  </div>
</template>

<script>
export default {
  name: 'Back',
  props: {
    color: {
      type: String,
      default: 'gray'
    }
  },
  methods: {
    back() {
      if (!this.$isShareOpen) {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/sass/_vars";
  .back {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      &::before {
        font-size: 20px;
      }

      &.gray:before {
        color: $header-back-arrow-color;
      }

      &.white:before {
        color: #fff;
      }

      &.black:before {
        color: #000;
      }
    }
  }
</style>